<template>
  <div>
    <div class="table-page-content">
      <z-table
        ref="table"
        rowKey="id"
        :showAlert="true"
        :showSelection="true"
        :loading="loading"
        :columns="columns"
        :dataSource="pageData"
        @selectedRow="onSelectedRow"
        @change="onTableChange"
      />
    </div>
    <!--弹窗区域-->
    <dispose-modal ref="disposeModal" @ok="modalFormOk" />
  </div>
</template>

<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
import disposeModal from './alarmCenterDisposeModal'
import { downLoadFileReader } from '@/utils/export-util/util'
import {queryArchivesAlarm} from "@api/sjsk/archives";

export default {
  components: { disposeModal },
  data() {
    return {
      loading: false,
      endOpen: false,
      selectKeys: [],
      queryParam: {},
      columns: [
        {
          title: '告警类型',
          dataIndex: 'alarmType',
          width: 100,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('model_type', text)} length={14} />
          }
        },
        {
          title: '手机号',
          dataIndex: 'cellPhoneNumber',
          width: 72,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={23} />
          },
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 80,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={14} />
          },
        },
        {
          title: '告警详情',
          dataIndex: 'alarmDescription',
          width: 110,
          align: 'left',
          customRender: (text) => {
            return <j-ellipsis value={text} length={20} />
          },
        },
        {
          title: '告警程度',
          dataIndex: 'alarmLevel',
          width: 70,
          align: 'center',
          customRender: (text) => {
            return (
              <span class={text==1 ? 'text_color_1' : text==2 ? 'text_color_2' : text==3 ? 'text_color_3' : ''}>
                {this.$filterDictTextByCache('alarm_degree', text)}
              </span>
            )
          }
        },
        {
          title: '处置状态',
          dataIndex: 'disposalStatus',
          width: 70,
          align: 'center',
          customRender: (text) => {
            return (
              <span class={text==0 ? 'text_color_1' : text==2 ? 'text_color_4' :''}>
                {this.$filterDictTextByCache('disposal_status', text)}
              </span>
            )
          }
        },
        {
          title: '告警时间',
          dataIndex: 'alarmTime',
          width: 100,
          align: 'center',
        },
        {
          title: '操作',
          width: 80,
          align: 'center',
          dataIndex: 'action',
          customRender: (text, record, index) => {
            return (
              <a-space size={6}>
                <a-button type="link" style={'padding:0'} onClick={(event) => this.clickPush(record)}> 查看 </a-button>
              </a-space>
            )
          },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      dataDisplay: {}
    }
  },
  // created() {
  //   // 初始化模型配置项
  //   this.$initDictOptions('model_type').then((res) => {
  //     if (res.success) {
  //       let d = [{text: '请选择', value: ''}]
  //       let datas = res.result.map((item, index)=> {
  //         if (Number(item.value) <= 11) {
  //           return {
  //             text: item.label,
  //             value: item.value
  //           }
  //         }
  //       }).filter(obj => obj !== undefined)
  //       this.fieldArr[0].dictOptions = [...d, ...datas]
  //     }
  //   })
  // },
  // async mounted() {
  //   this.$set(this.queryParam, 'updateType', '2')
  //   this.onQuery()
  //   this.getDataDisplay(1)
  // },
  methods: {
    // onQuery() {
    //   this.pageFilter.pageNo = 1
    //   this.refreshTable()
    // },
    // onResetForm() {
    //   this.queryParam = { updateType: '2' }
    //   this.pageFilter.pageNo = 1
    //   this.pageFilter.pageSize = 10
    //   this.refreshTable()
    //   // this.$refs.ruleForm.resetFields()
    // },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      let queryParam = Object.assign({}, this.queryParam, this.pageFilter)
      this.loading = true
      queryArchivesAlarm(queryParam)
        .then((res) => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    getDataDisplay(id) {
      alarmServiceApi
        .getDataDisplay(id)
        .then((res) => {
          if (res.success) {
            this.dataDisplay = res.result ? res.result : {}
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    // 导出
    handleExport(record) {
      let that = this
      let selectList = this.$refs.table.getSelectedRows()
      let idList1 = selectList.map(v => v.id).filter(obj => obj !== null && obj !== undefined && obj !== '')
      let idList2 = record && Object.keys(record).length > 0 && record.id ? [record.id] : []
      let params = Object.assign(
        {},
        {
          ids: selectList.length > 0 ? idList1 : idList2,
          ...this.queryParam
        }
      )
      this.$confirm({
        title: `是否确认导出？`,
        okText: '确定',
        onOk() {
          alarmServiceApi.alarmCenterExport(params).then(async res => {
            const fileName = '告警中心列表数据.xlsx'
            await downLoadFileReader(res, fileName)
            that.$refs.table.onClearRowKeys()
          })
        }
      })
    },
    // 弹窗成功接收
    modalFormOk() {
      this.onQuery()
    },
    // 处置、处置查看
    dispose(record, type) {
      this.$refs.disposeModal.show(record, type)
    },
    // 预警时间-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.queryParam).length > 0 && this.queryParam.endTime
        ? this.$JMoment(this.queryParam.endTime) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 预警时间-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.queryParam).length > 0 && this.queryParam.startTime
        ? this.$JMoment(this.queryParam.startTime) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 预警时间-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status==='start' && !open) {
        this.endOpen = true
      }
      if (status==='end') {
        this.endOpen = open
      }
    }
  },
}
</script>
<style scoped lang="less">
.text_color_1 {
  color: #d9001b;
}
.text_color_2 {
  color: #f59a23;
}
.text_color_3 {
  color: #bfbf00;
}
.text_color_4 {
  color: #02a7f0;
}
.text_color_5 {
  color: #aeaeae;
}
</style>
